<!DOCTYPE html>
<html>
<head>
  <title>WebSocket Chat</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.4.0/sockjs.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
  <script>
    let stompClient = null;

    function connect() {
      const socket = new SockJS('/ws');
      stompClient = Stomp.over(socket);
      stompClient.connect({}, function (frame) {
        console.log('Connected: ' + frame);
        stompClient.subscribe('/topic/messages', function (message) {
          showMessage(JSON.parse(message.body));
        });
      });
    }

    function sendMessage() {
      const from = document.getElementById('from').value;
      const content = document.getElementById('content').value;
      stompClient.send("/app/sendMessage", {}, JSON.stringify({'from': from, 'content': content}));
    }

    function showMessage(message) {
      const messages = document.getElementById('messages');
      const messageElement = document.createElement('div');
      messageElement.innerText = message.from + ': ' + message.content;
      messages.appendChild(messageElement);
    }

    window.onload = function() {
      connect();
    }
  </script>
</head>
<body>
  <div>
    <input type="text" id="from" placeholder="Your name"/>
    <input type="text" id="content" placeholder="Message"/>
    <button onclick="sendMessage()">Send</button>
  </div>
  <div id="messages"></div>
</body>
</html>
